<template>
    <v-layout class="px-4 pb-3 pt-3 white--text" column>
        <v-flex>
            <v-sheet
                    fill-height
                    height="80px"
                    width="100%"
                    elevation="0"
            >
                <v-layout fill-height>
                    <v-flex fill-height xs8>
                        <v-pagination
                                v-model="current"
                                :length="size"
                                :total-visible="7"
                                @input="loadBlogs(current,pageSize)"
                                circle
                        >
                        </v-pagination>
                    </v-flex>
                    <v-flex fill-height xs4>
                        <v-select
                                :items="orders"
                                item-text="name"
                                v-model="selectOrder"
                                @input="refreshBlogs()"
                                menu-props="{ top: true, offsetY: true }"
                                label="排序方式"
                                hide-details
                        />
                    </v-flex>
                </v-layout>

            </v-sheet>
        </v-flex>
        <v-flex>
            <v-content
                    v-if="blogList && blogList.length > 0"
            >
                <v-row
                        v-for="blog in blogList"
                        :key="blog.id"
                >
                    <v-sheet
                            width="100%"
                            elevation="0"
                            class="align-center mt-3"
                    >
                        <!--博客列表 单元卡 模块-->
                        <v-hover
                                v-slot:default="{ hover }"
                                open-delay="0"
                                close-delay="0"
                        >
                            <v-card
                                    max-width="100%"
                                    class="point-cursor mx-auto"
                                    :elevation="hover ? 12 : 0"
                                    @click="goToBlog(blog)"
                            >
                                <v-row>
                                    <v-card-title class="title ml-3">
                                        {{blog.title}}
                                    </v-card-title>
                                </v-row>
                                <v-row
                                        class="py-4 pl-4"
                                >
                                    <v-col class="shrink">
                                        <v-img
                                                height="200"
                                                width="200"
                                                :src="blog.coverUrl"
                                        />
                                    </v-col>
                                    <v-col>
                                        <v-layout align-start column>
                                            <v-flex class="caption">
                                                <v-btn text depressed x-small>作者:</v-btn>
                                                <v-chip
                                                        class="ma-2"
                                                        color="indigo"
                                                        small
                                                        text-color="white"
                                                >
                                                    <v-avatar left>
                                                        <v-icon>mdi-account-circle</v-icon>
                                                    </v-avatar>
                                                    {{blog.author}}
                                                </v-chip>
                                                <v-divider vertical inset/>
                                                <v-btn text depressed x-small>发表时间:</v-btn>
                                                <v-icon>mdi-history</v-icon>
                                                {{blog.createTime}}
                                                <v-divider vertical inset/>
                                                <v-btn text depressed x-small>分类:</v-btn>
                                                <v-icon> mdi-google-chrome</v-icon>
                                                <v-btn x-small outlined color="success">
                                                    {{blog.blogType}}
                                                </v-btn>
                                            </v-flex>
                                            <v-flex class="caption">
                                                <v-row>
                                                    <v-card v-for="tag in blog.tags" elevation="0">
                                                        <v-card-text>
                                                            <v-chip outlined small :color="getRandomColor()">
                                                                {{tag.name}}
                                                            </v-chip>
                                                        </v-card-text>
                                                    </v-card>

                                                </v-row>
                                            </v-flex>
                                            <v-flex>
                                                <v-card-text>
                                                    {{blog.intro}}
                                                </v-card-text>
                                            </v-flex>
                                        </v-layout>

                                    </v-col>
                                </v-row>
                            </v-card>
                        </v-hover>
                    </v-sheet>
                </v-row>
            </v-content>
            <v-content v-else="">
                <v-row aligin-center>
                    <v-img
                            src="http://111.231.239.202:8018/data/img/kongkongruye.png"
                            aspect-ratio="1"
                            class="grey lighten-2"
                            max-height="300"
                    />
                </v-row>
            </v-content>
        </v-flex>
        <v-flex>
            <v-sheet
                    fill-height
                    height="80px"
                    width="100%"
                    elevation="0"
            >
                <v-layout fill-height class="mt-10">
                    <v-flex fill-height xs8>
                        <v-pagination
                                v-model="current"
                                :length="size"
                                :total-visible="7"
                                @input="loadBlogs(current,pageSize)"
                                circle
                        >
                        </v-pagination>
                    </v-flex>
                </v-layout>

            </v-sheet>
        </v-flex>
    </v-layout>
</template>

<script>
    import '@/assets/css/business/bloglist/bloglist.scss';
    import {mapGetters, mapState} from "vuex";

    export default {
        name: "blogList",
        data: () => ({
            blogList: [],//博客列表
            current: 1,//初始时是第几页
            pageSize: 10,//一页需要展示多少条博客
            size: 0,//当前总共有多少页，根据后台回传的参数计算
            loading: false,
            orders: [
                {name: '最后修改日期', value: "updateTime"},
                {name: '最后发表日期', value: "createTime"},
                {name: '评论最多', value: "commentNum"}
            ],
            selectOrder: 1,//选中的下拉
            tagColors: [
                "green lighten-3", "light-green darken-1", "lime darken-3", "orange lighten-4", "blue-grey lighten-1", "brown lighten-1",
                "deep-orange darken-4", "black", "light-blue accent-1", "teal lighten-2", "deep-purple lighten-1", "purple lighten-4",
                "pink lighten-5", "light-green lighten-1"]

        }),
        computed: {
            //在这里映射 store.state.count，使用方法和 computed 里的其他属性一样
            ...mapGetters([
                'getBlogType',
                'getBlogTag'
            ]),
        },
        methods: {
            // 使用对象展开运算符将 getter 混入 computed 对象中

            /**
             * 初始化博客列表
             */
            initBlogs(current, pageSize) {
                this.showLoading();
                this.loadBlogs(current, pageSize);
            },
            /**
             * 刷新博客
             */
            refreshBlogs() {
                this.loadBlogs(1, this.pageSize);
            },
            /**
             * 重新加载博客
             * @param current
             * @param pageSize
             */
            loadBlogs(current, pageSize) {
                this.showLoading();
                this.$axios.post("/api/blog/blogList", this.$qs.stringify({
                    current: current,
                    pageSize: pageSize,
                    order: this.selectOrder,
                    blogType: this.getBlogType !== "" ? this.getBlogType : null,
                    blogTag: this.getBlogTag !== "" ? this.getBlogTag : null
                })).then(res => {
                    this.hideLoading();
                    let resultData = res.data;
                    if (resultData && resultData.code === 200) {
                        let data = resultData.data;
                        this.blogList = [];
                        this.blogList.push(...data.records);
                        this.size = Math.ceil(data.total / this.pageSize);
                    }
                });
            },
            /**
             * 进入博客
             * */
            goToBlog(blog) {
                this.$goRoute("/blogView", blog);
            },
            /**
             * 显示loading
             * */
            showLoading() {
                this.loading = true;
            },
            /**
             * 隐藏loading
             * */
            hideLoading() {
                this.loading = false;
            },
            /**
             * 获取随机颜色
             * @returns {string}
             */
            getRandomColor() {
                return this.$lodash.sample(this.tagColors);
            }

        },
        created() {
            this.initBlogs(this.current, this.pageSize);
        },
        mounted() {
        }
    }
</script>

<style scoped>

</style>